<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        @keyframes action {
            0% {
                transform: rotateY(0);
            }

            100% {
                transform: rotateY(360deg);
            }
        }

        @keyframes actiona {
            0% {
                transform: translateZ(90px);
                opacity: 0.3;
            }

            100% {
                transform: translateZ(150px);
                opacity: 0.8;
            }
        }

        @keyframes actionb {
            0% {
                transform: rotateY(90deg) translateZ(90px);
                opacity: 0.3;
            }

            100% {
                transform: rotateY(90deg) translateZ(150px);
                opacity: 0.8;
            }
        }

        @keyframes actionc {
            0% {
                transform: rotateY(180deg) translateZ(90px);
                opacity: 0.3;
            }

            100% {
                transform: rotateY(180deg) translateZ(150px);
                opacity: 0.8;
            }
        }

        @keyframes actiond {
            0% {
                transform: rotateY(270deg) translateZ(90px);
                opacity: 0.3;
            }

            100% {
                transform: rotateY(270deg) translateZ(150px);
                opacity: 0.8;
            }
        }

        @keyframes actione {
            0% {
                transform: rotateX(90deg) translateZ(90px);
                opacity: 0.3;
            }

            100% {
                transform: rotateX(90deg) translateZ(150px);
                opacity: 0.8;
            }
        }

        @keyframes actionf {
            0% {
                transform: rotateX(270deg) translateZ(90px);
                opacity: 0.3;
            }

            100% {
                transform: rotateX(270deg) translateZ(150px);
                opacity: 0.8;
            }
        }

        @keyframes actiong {
            0% {
                transform: translateZ(150px);
                opacity: 0.8;

            }

            100% {
                transform: translateZ(90px);
                opacity: 0.3;

            }
        }

        @keyframes actionh {
            0% {
                transform: rotateY(90deg) translateZ(150px);
                opacity: 0.8;

            }

            100% {
                transform: rotateY(90deg) translateZ(90px);
                opacity: 0.3;
            }
        }

        @keyframes actioni {
            0% {
                transform: rotateY(180deg) translateZ(150px);
                opacity: 0.8;
            }

            100% {
                transform: rotateY(180deg) translateZ(90px);
                opacity: 0.3;

            }
        }

        @keyframes actionj {
            0% {
                transform: rotateY(270deg) translateZ(150px);
                opacity: 0.8;
            }

            100% {
                transform: rotateY(270deg) translateZ(90px);
                opacity: 0.3;

            }
        }

        @keyframes actionk {
            0% {
                transform: rotateX(90deg) translateZ(150px);
                opacity: 0.8;
            }

            100% {
                transform: rotateX(90deg) translateZ(90px);
                opacity: 0.3;

            }
        }

        @keyframes actionl {
            0% {
                transform: rotateX(270deg) translateZ(150px);
                opacity: 0.8;
            }

            100% {
                transform: rotateX(270deg) translateZ(90px);
                opacity: 0.3;

            }
        }

        body {
            perspective: 400px;
        }

        .body {
            transform-style: preserve-3d;
            position: relative;
            margin: 200px auto;
            width: 180px;
            height: 180px;
            animation: action 5s linear infinite;
        }

        .body div:nth-child(1) {
            padding: 40px;
            position: absolute;
            transform: translateZ(50px);
            z-index: 6;
        }

        .body div:nth-child(2) {
            padding: 40px;
            position: absolute;
            transform: rotateY(90deg) translateZ(50px);
            z-index: 5;
        }

        .body div:nth-child(3) {
            padding: 40px;
            position: absolute;
            transform: rotateY(180deg) translateZ(50px);
            z-index: 4;
        }

        .body div:nth-child(4) {
            padding: 40px;
            position: absolute;
            transform: rotateY(270deg) translateZ(50px);
            z-index: 3;
        }

        .body div:nth-child(5) {
            padding: 40px;
            position: absolute;
            transform: rotateX(90deg) translateZ(50px);
            z-index: 2;
        }

        .body div:nth-child(6) {
            padding: 40px;
            position: absolute;
            transform: rotateX(270deg) translateZ(50px);
            z-index: 1;
        }

        .body div:nth-child(7) {
            position: absolute;
            transform: translateZ(90px);
            opacity: 0.3;
            z-index: 12;
        }

        .body div:nth-child(8) {
            position: absolute;
            transform: rotateY(90deg) translateZ(90px);
            opacity: 0.3;
            z-index: 11;
        }

        .body div:nth-child(9) {
            position: absolute;
            transform: rotateY(180deg) translateZ(90px);
            opacity: 0.3;
            z-index: 10;
        }

        .body div:nth-child(10) {
            position: absolute;
            transform: rotateY(270deg) translateZ(90px);
            opacity: 0.3;
            z-index: 9;
        }

        .body div:nth-child(11) {
            position: absolute;
            transform: rotateX(90deg) translateZ(90px);
            opacity: 0.3;
            z-index: 8;
        }

        .body div:nth-child(12) {
            position: absolute;
            transform: rotateX(270deg) translateZ(90px);
            opacity: 0.3;
            z-index: 7;
        }
    </style>
</head>

<body>
    <div class="body">
        <div><img src="img/ckbl.jpg" alt=""></div>
        <div><img src="img/ckbl.jpg" alt=""></div>
        <div><img src="img/ckbl.jpg" alt=""></div>
        <div><img src="img/ckbl.jpg" alt=""></div>
        <div><img src="img/ckbl.jpg" alt=""></div>
        <div><img src="img/ckbl.jpg" alt=""></div>
        <div><img src="img/ckbb.jpg" alt=""></div>
        <div><img src="img/ckbb.jpg" alt=""></div>
        <div><img src="img/ckbb.jpg" alt=""></div>
        <div><img src="img/ckbb.jpg" alt=""></div>
        <div><img src="img/ckbb.jpg" alt=""></div>
        <div><img src="img/ckbb.jpg" alt=""></div>
    </div>
</body>
<script>
    var body = document.querySelector('.body')
    var div = document.querySelectorAll('.body div')
    body.onmouseover = function () {
        div[6].style.animation = 'actiona 0.8s linear forwards'
        div[7].style.animation = 'actionb 0.8s linear forwards'
        div[8].style.animation = 'actionc 0.8s linear forwards'
        div[9].style.animation = 'actiond 0.8s linear forwards'
        div[10].style.animation = 'actione 0.8s linear forwards'
        div[11].style.animation = 'actionf 0.8s linear forwards'
    }
    body.onmouseout = function () {
        div[6].style.animation = 'actiong 0.8s linear forwards'
        div[7].style.animation = 'actionh 0.8s linear forwards'
        div[8].style.animation = 'actioni 0.8s linear forwards'
        div[9].style.animation = 'actionj 0.8s linear forwards'
        div[10].style.animation = 'actionk 0.8s linear forwards'
        div[11].style.animation = 'actionl 0.8s linear forwards'
    }
</script>

</html>